<template>
	<view class="online">
		<view class="avatar-list" @click="openOnlineUserList">
			<view class="avatar" v-for="(item,i) in memberList" :key="i">
				<u-avatar size="40" :src="item.avatar"></u-avatar>
			</view>
			<view class="text">
				{{memberCount}}人在线
			</view>
		</view>
		<view class="user-list">
			<view class="item">
				<view class="avatar">
					<image :src="detail.avatar" mode="aspectFill"></image>
					<text class="badge">房主</text>
				</view>
				<image class="icon-30 mt-24" src="../../static/mic_on.png" mode="widthFix"></image>
				<view class="name line-clamp">
					{{detail.nickname}}
				</view>
			</view>
			<view class="item" v-for="item in applyMicList" :key="item.id" @click="handle(item)">
				<view class="avatar">
					<image :src="item.avatar" mode="aspectFill"></image>
					<text v-if="item.is_manager==1" class="badge">乘客</text>
					<text v-if="item.is_manager==2" class="badge">管理</text>
				</view>
				<image v-if="item.mute" class="icon-30 mt-24" src="../../static/mic_off.png" mode="widthFix"></image>
				<image v-else class="icon-30 mt-24" src="../../static/mic_on.png" mode="widthFix"></image>
				<view class="name line-clamp">
					{{item.nickname}}
				</view>
			</view>
			
			<!-- <view class="item">
				<view class="avatar">
					<image src="../../static/icon-qun.png" mode="aspectFill"></image>
					<text class="badge">乘客</text>
				</view>
				<image class="icon-30 mt-24" src="../../static/mic_off.png" mode="widthFix"></image>
				<view class="name line-clamp">
					朱祁钰
				</view>
			</view>
			<view class="item">
				<view class="avatar">
					<image src="../../static/icon-qun.png" mode="aspectFill"></image>
					<text class="badge">乘客</text>
				</view>
				<image class="icon-30 mt-24" src="../../static/mic_off.png" mode="widthFix"></image>
				<view class="name line-clamp">
					朱祁钰
				</view>
			</view>
			<view class="item">
				<view class="avatar">
					<image src="../../static/icon-qun.png" mode="aspectFill"></image>
					<text class="badge">乘客</text>
				</view>
				<image class="icon-30 mt-24" src="../../static/mic_off.png" mode="widthFix"></image>
				<view class="name line-clamp">
					朱祁钰
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		name: "n-radio-user",
		data() {
			return {
			
			};
		},
		props: {
			applyMicList: {
				type: Array,
				default: () => {
					return []
				}
			},
			memberList: {
				type: Array,
				default: () => {
					return []
				}
			},
			memberCount: {
				type: [Number, String],
				default: 0
			},
			detail: {
				type: Object,
				default: () => {
					return {}
				}
			},
		},
		methods:{
			// 打开在线用户列表
			openOnlineUserList(){
				this.$emit('openOnlineUserList')
			},
			// 传递父级要操作用户 user_id is_manager
			handle(user){
				this.$emit('click',user)
			},
			
		}
	}
</script>

<style lang="scss">
	.online {
		border-top: 1upx solid #EFEFEF;
		padding: 20upx 30upx;
		background: #fff;
		margin-bottom: 16upx;

		.avatar-list {
			@include flex-center;

			.avatar {
				margin-left: -16upx;
				line-height: 1;
				display: block;
			}

			.text {
				font-size: 24upx;
				font-weight: 400;
				color: #519D76;
				margin-left: 10upx;
			}
		}

		.user-list {
			margin-top: 20upx;
			@include flex-center;

			.item {
				text-align: center;
				margin: 0 25upx;
				@include flex-col;
				align-items: center;
			}

			.avatar {
				width: 88upx;
				height: 88upx;
				border: 2upx solid #519D76;
				border-radius: 50%;
				position: relative;

				image {
					width: 88upx;
					height: 88upx;
					border-radius: 50%;
				}

				.badge {
					position: absolute;
					left: 50%;
					bottom: -14upx;
					margin-left: -36upx;
					text-align: center;
					width: 72upx;
					line-height: 28upx;
					background: #519D76;
					border-radius: 14upx;
					font-size: 20upx;
					font-weight: 500;
					color: #FFFFFF;
				}
			}

		}
	}
</style>
